<template>
  <el-row class="Header">
      <span class="title-log" @click="go0">鲸智图书</span>
<!--    <img class="logo" src="@/assets/img/logo.jpg">-->

    <el-input class="input"
              v-model="input"
              suffix-icon="el-icon-search"
              @keyup.enter.native="onEnter()"
              placeholder="请输入需要搜索的内容 ..."/>

    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <div @click="goMy">
          <el-dropdown-item><i class="el-icon-user"/> 我的</el-dropdown-item>
        </div>
        <div @click="gologin">
          <el-dropdown-item><i class="el-icon-switch-button"/> 注销</el-dropdown-item>
        </div>
      </el-dropdown-menu>
    </el-dropdown>




  </el-row>
</template>

<script>
  export default {
    name: "Header",
    data() {
      return {
        input: ""
      }
    },
    methods: {
      go0() {
        this.$router.push('/')
      },
      goMy() {
        this.$router.push('/My')
      },
      gologin() {
        this.$store.dispatch('loginVue',{
          token: '',
          userId: '',
          userType: ''})
        this.$router.push('/login')
      },
      onEnter(){
        this.$router.push({
          path: '/CategoryContent'
        })
        this.$bus.emit('Search', this.input)
      }

    }
  }
</script>

<style scoped>
  .Header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }
  .logo {
    height: 80px;
  }
  .title-log {
    cursor: pointer;
    font-size: 60px;
    color: rgb(51, 204, 255);
    font-family: 华文隶书;
    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  }
  .input {
    width: 400px;
    height: 40px;
    margin: 0 180px 0;
  }
   .el-dropdown-link {
     margin-left: 60px;
     cursor: pointer;
     color: #409EFF;
   }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
